<template>
    <div class="channel-edit">
        <van-cell :border="false">
            <div slot="title" class="title-text">我的频道</div>
            <van-button class="edit-btn" type="danger" @click="isEdit = !isEdit" plain round size="mini">{{isEdit ? '完成' : '编辑'}}</van-button>
        </van-cell>
        <van-grid :gutter="10" class="my-grid">
            <van-grid-item @click="editChannel(item,index)" class="grid-item" v-for="(item,index) in myChannels" :key="index">
                <van-icon slot="icon" name="close" v-show="isEdit && !notDelChannel.includes(item.id)"></van-icon>
                <span slot="text" class="text" :class="{active:index === activeIndex}">{{item.name}}</span>
            </van-grid-item>
        </van-grid> 
        <!-- 频道推荐 -->
        <van-cell :border="false">
            <div slot="title" class="title-text">频道推荐</div>
        </van-cell>
        <van-grid :gutter="10" class="command-grid">
            <van-grid-item @click="onAddChannel(item)" class="grid-item" icon="plus" v-for="item in recommandChannels" :key="item.id" :text="item.name" />
        </van-grid>
    </div>
</template>

<script>
import { getAllChannels,addUserChannel,delUserChannel } from "@/api/channel";
import { setItem,getItem } from "@/utils/storage";
import { mapState } from "vuex";
export default {
    name:'ChannelEdit',
    props:{
        myChannels:{
            type:Array,
            required:true
        },
        activeIndex:{
            type:Number,
            required:true
        }
    },
    data(){
        return {
            allChannels:[],
            isEdit:false,//是否在编辑状态
            notDelChannel:[0],//不能删除的频道
        }
    },
    computed:{
        ...mapState(['user']),
        recommandChannels(){
            return this.allChannels.filter(item=>{
                return !this.myChannels.find(my=>my.id === item.id)
            })
        }
    },
    methods:{
        // 获取全部频道列表
        async loadAllChannels(){
            try {
                const { data } = await getAllChannels()
                this.allChannels = data.data.channels
            } catch (error) {
                this.$toast('数据获取失败')
            }
        },
        // 添加
        async onAddChannel(channel){
            this.myChannels.push(channel)
            // 数据持久化
            if (this.user) {
                // 已登录 
                try {
                    await addUserChannel({
                        id:channel.id,
                        seq:this.myChannels.length
                    })
                } catch (error) {
                    this.$toast('保存失败，请稍后重试')
                }
            }else{
                // 未登录 存储到本地
                setItem('TOUTIAO-CHANNELS',this.myChannels)
            }
        },
        editChannel(channel,index){
            // this.activeIndex = v
            // 如果是编辑状态 执行删除频道
            if (this.isEdit) {
                if (this.notDelChannel.includes(channel.id)) {
                    return
                }
                if (index<= this.activeIndex) {
                    // 让激活的索引 -1
                    this.$emit('update-active',this.activeIndex - 1,true)
                }
                this.myChannels.splice(index,1)
                // 处理持久化
                this.deleteChannel(channel.id)
            } else { // 如果是非编辑状态 执行跳转频道页面
                this.$emit('update-active',index,false)
            }
        },
        async deleteChannel(channelId){
            if (this.user) {
                // 已登录 
                try {
                    await delUserChannel(channelId)
                } catch (error) {
                    this.$toast('删除频道失败')
                }
            } else {
                // 未登录 存储到本地
                setItem('TOUTIAO-CHANNELS',this.myChannels)
            }
        }
    },
    created(){
        this.loadAllChannels()
    }
};
</script>

<style lang="less" scoped>
.channel-edit{
    padding: 85px 0;
    .title-text{
        font-size: 32px;
        color: #333;
    }
    .edit-btn{
        width: 104px;
        height: 48px;
        font-size: 26px;
        color: #f85959;
        border: 1px solid indianred;
    }
    /deep/ .my-grid{
        .grid-item{
            .van-icon-close{
                position: absolute;
                top: -10px;
                right: -10px;
                font-size: 30px;
                color: #cacaca;
                z-index: 2;
            }
        }
    }
    /deep/.grid-item{
        width: 160px;
        height: 86px;
        .van-grid-item__content{
            white-space: nowrap;
            background-color: #f4f5f6;
            .van-grid-item__text,.text{
                font-size: 28px;
                color: #222;
                margin-top: 0;
            }
            .active{color: red;}
            .van-grid-item__icon-wrapper{
                position: unset;
            }
        }
    }
    /deep/.command-grid{
        .grid-item{
            .van-grid-item__content{
                flex-direction: row;
                .van-grid-item__icon{
                    font-size: 28px;
                    margin-right: 6px;
                }
            }
        }
    }
}
</style>